<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body, html {
                width: 100%;
                height: 100%;
                overflow: hidden;
                margin: 0;
            }
            
            #allmap {
                margin-right: 300px;
                height: 100%;
                overflow: hidden;
            }
            
            #result {
                border-left: 1px dotted #999;
                height: 100%;
                width: 295px;
                position: absolute;
                top: 0px;
                right: 0px;
                font-size: 12px;
            }
            
            dl, dt, dd, ul, li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            dt {
                font-size: 14px;
                font-family: "微软雅黑";
                font-weight: bold;
                border-bottom: 1px dotted #000;
                padding: 5px 0 5px 5px;
                margin: 5px 0;
            }
            
            dd {
                padding: 5px 0 0 5px;
            }
            
            li {
                line-height: 28px;
            }
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=770fb501e45d550f1f8eb804128afb21">
        </script>
        <script type="text/javascript" src="SearchInfoWindow_min.js">
        </script>
        <link rel="stylesheet" href="SearchInfoWindow_min.css" />
        <title>SearchInfoWindow</title>
    </head>
    <body>
        <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
            <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
            </div>
        </div>
        <script type="text/javascript">
        	var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '<img src="test.gif" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                    '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
                  '</div>';
			
			
            var map = new BMap.Map('map');
            //    var poi = new BMap.Point(116.307852,40.057031);
            var points = [new BMap.Point(116.411776, 39.942833), new BMap.Point(116.454579, 39.946652)];
            
            var marker1 = new BMap.Marker(points[0]); // 创建10个标注
            var marker2 = new BMap.Marker(points[1]);
            
            map.addOverlay(marker1); // 将标注添加到地图中
            map.addOverlay(marker2);
			
            map.setViewport(points); //调整地图的最佳视野为显示标注数组point
            
			
            var opts1 = {title : '<span style="font-size:14px;color:#0A8021">如家快捷酒店</span>'};
			var opts2 = {title : '<span style="font-size:14px;color:#0A8021">昆仑大厦</span>'};
			
			var infoWindow1 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市朝阳区高碑店小学旁</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts1);  
			var infoWindow2 =new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>地址:</b>北京市海淀区紫竹院123号</br><b>电话:</b>010-59921010</br><b>口碑：</b><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><img src='http://cdn2.iconfinder.com/data/icons/diagona/icon/16/031.png' /><a style='text-decoration:none;color:#2679BA;float:right' href='#'>详情>></a></div>", opts2);
			
			marker1.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow1);});
			marker2.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow2);});
			
			
			
			
			
			
//            var myIcon = new BMap.Icon("test.gif", new BMap.Size(137, 58), { //小车图片
////				offset: new BMap.Size(0, -5),    //相当于CSS精灵
//                imageOffset: new BMap.Size(0, -20) //图片的偏移量。为了是图片底部中心对准坐标点。
//            });
//            var carMk1 = new BMap.Marker(points[0], {
//                icon: myIcon
//            }); //创建标注
//            var carMk2 = new BMap.Marker(points[1], {
//                icon: myIcon
//            }); //创建标注
//            map.addOverlay(carMk1); //添加marker到地图上
//            map.addOverlay(carMk2); //添加marker到地图上
            
            
        </script>
    </body>
</html>
</script>
